<template>
  <div>
    <div style="margin-bottom: 20px;">
      <h1>靓号管理</h1>
    </div>
    <el-container style="width: 100%; height: 600px;background: #fff;">
      <el-aside width="300px" style="background: none;border-right: 1px solid #f2f2f2;">
        <div style="line-height: 70px;padding: 0 20px;">运营商</div>
        <div>
          <div class="ring_menu" v-for="(i,x) in operatorCode" :ref="`operator${x}`" :key="i.code" @click="changeOperator(i,x)">
            <a v-if="i.code==='01'">
              <span class="iconfont icon-dianxin" style="color: #489af6;"></span>&nbsp;&nbsp;
              {{ i.name }}</a>
            <a v-if="i.code==='02'">
              <span class="iconfont icon-liantong" style="color: #d62119;"></span>&nbsp;&nbsp;
              {{ i.name }}</a>
            <a v-if="i.code==='03'">
              <span class="iconfont icon-yidong" style="color: #7eb95e;"></span>&nbsp;&nbsp;
              {{ i.name }}</a>
          </div>
        </div>
      </el-aside>
      <el-main style="position: relative; margin: 20px; padding: 0;">
        <div>
          <div style="float: left;line-height: 30px;margin-bottom: 20px">{{ operator.name }}</div>
          <el-button class="ring-button-examine"
                     @click="()=>$router.push({ path: '/MaintenanceManager', query: { packageId: currentRow.packageId }})">
            查看套餐
          </el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="靓号名称">
            <template slot-scope="scope">
              <el-input type="text" placeholder="请输入靓号名称" maxlength="25" v-model="scope.row.aaaaNoTypeName"
                        :disabled="!editAble"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="最低消费套餐">
            <template slot-scope="scope">
              <el-select v-model="scope.row.packageId" placeholder="请选最低消费套餐" :disabled="!editAble"
                         @change="(value)=>{
                         const _package = effectivePackageList.find(p=>p.id === value);
                         scope.row.packagePrice = _package.packagePrice;
                         scope.row.packageId = _package.id;
                       }">
                <el-option v-for="{id,packageName} in effectivePackageList" :label="packageName" :value="id"
                           :key="id"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="套餐价格" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px" v-show="scope.row.packagePrice">¥{{ scope.row.packagePrice }}元/月</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope" v-if="userInfo.isSuperAdmin==='1' && editAble">
              <i class="el-icon-delete" style="color: #ff3300;cursor: pointer;" @click="deleteAaaaType(scope)"></i>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center" v-if="userInfo.isSuperAdmin==='1' && editAble">
          <el-button type="primary" @click="add" class="ring_add">+&nbsp; 添加靓号</el-button>
        </div>
        <div class="dialog-footer" v-if="userInfo.isSuperAdmin==='1'">
          <span slot="footer">
            <el-button v-show="editAble" type="danger" @click="cancel">取消</el-button>
            <el-button v-show="editAble" type="primary" @click="save" :loading="loading">保存</el-button>
            <el-button v-show="!editAble" type="primary" @click="editAble=true">编辑</el-button>
          </span>
        </div>
      </el-main>
    </el-container>

  </div>

</template>

<script>
import request from "@/utils/Request";
import {operatorCode} from "@/common/PublicCode"


export default {
  name: "AAAANoTypeManager",
  data() {
    return {
      loading: false,
      editAble: false,
      operatorCode: operatorCode,
      effectivePackageList: [],
      tableData: [],
      oriTableData: [],
      operator: operatorCode[0],
      currentRow: {},
    }
  },
  mounted() {
    this.$refs['operator0'][0].style.color = 'blue';
    this.$refs['operator0'][0].style['background-color'] = 'rgb(239, 242, 255)';
    this.initList()
    this.initEffectivePackageList();
  },
  methods: {
    deleteAaaaType(scope) {
      request.get('/AAAANoType/checkAaaaIsUsed', {params: {id: scope.row.id}}).then(({data}) => {
        if (data.success) {
          this.tableData.splice(scope.$index, 1);
        } else {
          this.$message({type: 'warning', message: `无法删除，${data.message}`});
        }
      }).catch(err => {
        this.$message({type: 'error', message: "检查靓号是否被使用失败"});
        console.log(err)
      })
    },
    cancel() {
      this.tableData = JSON.parse(JSON.stringify(this.oriTableData));
      this.editAble = false;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    changeOperator(_i,_x) {
      this.editAble = false;
      this.operatorCode.forEach((p,x) => {
        this.$refs[`operator${x}`][0].style.color = '';
        this.$refs[`operator${x}`][0].style['background-color']= '';
      })
      this.$refs[`operator${_x}`][0].style.color = 'blue';
      this.$refs[`operator${_x}`][0].style['background-color'] = 'rgb(239, 242, 255)';
      this.operator = _i;
      this.initList();
      this.initEffectivePackageList();
    },
    initList() {
      request.get('/AAAANoType/getList', {params: {operator: this.operator.code}}).then(({data}) => {
        if (data.success) {
          this.tableData = JSON.parse(JSON.stringify(data.data));
          this.oriTableData = JSON.parse(JSON.stringify(data.data));
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询靓号列表失败"});
        console.log(err)
      })
    },
    add() {
      let item = {aaaaNoTypeName: '', packageId: '', operator: this.operator.code};
      this.tableData.push(item);
    },
    initEffectivePackageList() {
      request.get('/telecomPackage/getEffectiveList', {params: {operator: this.operator.code}}).then(({data}) => {
        if (data.success) {
          this.effectivePackageList = data.data;
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询套餐列表失败"});
        console.log(err)
      })
    },
    async save() {
      if (this.tableData.filter(f => !f.aaaaNoTypeName || !f.packageId).length > 0) {
        this.$message({type: 'warning', message: "无法保存, 存在未完成的靓号"});
        return;
      }
      const confirm = await this.$confirm('是否确认保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return true;
      }).catch(() => {
        return false;
      });
      if (!confirm) {
        return;
      }
      this.loading = true;
      request.post('/AAAANoType/saveList', {operator: this.operator.code, data: this.tableData}).then(({data}) => {
        if (data.success) {
          this.editAble = false;
          this.$message({type: 'success', message: "保存靓号成功"});
          this.oriTableData = JSON.parse(JSON.stringify(this.tableData));
        } else {
          this.$message({type: 'warning', message: data.message});
        }
      }).catch(err => {
        this.$message({type: 'error', message: "保存靓号失败"});
        console.log(err)
      }).finally(() => {
        this.loading = false;
      })
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo'));
    }
  },
}
</script>

<style scoped>
.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
}

.el-main {
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.ring-button-examine {
  float: right;
  border-color: #5B73FF;
  color: #5B73FF;
}

.ring-button-examine:hover {
  border: 1px solid #dce7ff;
}

.dialog-footer {
  position: absolute;
  bottom: 0;
  height: 70px;
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

.ring_add {
  background: #FAFAFA;
  border: 1px #f2f2f2 dashed;
  color: #646C9A;
  width: 100%;
  margin: 10px auto;
}

.ring_add:hover {
  background: #e6edff;
  border: 1px #dce7ff dashed;
  color: #5B73FF;
}

.ring_menu a {
  line-height: 40px;
  height: 40px;
  display: block;
  padding: 0 20px;
  font-size: 14px;
  color: #646C9A;
}

.ring_menu a:hover {
  color: #5B73FF;
  background: #dce7ff;
  margin: 0;
}

</style>